<template>
  <div class="content">
    <el-button @click="(dialogVisible = true)">{{title}}广告</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;" border>
      <el-table-column prop="pid" label="PID" width="180"> </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="url" label="访问地址" min-width="240" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="image" label="图片地址" min-width="240" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增广告内容" v-model="dialogVisible" width="30%">
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item label="广告名称">
          <el-input v-model="formInline.name" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="广告图片地址">
          <el-input v-model="formInline.url" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="formInline.image" placeholder="审批人"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submithandle">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, reactive, onMounted, nextTick } from 'vue';
//全局导入
const cxt = getCurrentInstance()
const API = cxt.appContext.config.globalProperties.$API
const bus = cxt.appContext.config.globalProperties.$bus
onMounted(() => {
  bus.on('getTreeData', (data) => {
    // console.log(data);
    title.value = data.label
    pid.value = data.pid
    getdata(data.pid)
  })
})
const getdata = async(pid) => {
    tableData.splice(0, tableData.length)
    const result = await API.getselectTbContentAllByCategoryId({ pid })
    // console.log(result);
    if (result.status == 200) {
      tableData.push(...result.result)
      // console.log(tableData);
    }
}
//获取产品列表数据
const tableData = reactive([])
const title = ref('')
const pid=ref('')
const formInline=reactive({
  image: '',
  url: '',
  name: ''
})
const dialogVisible = ref(false)
//增加广告内容
const submithandle = async () => {
  let { image, url, name } = formInline;
  console.log(image, url, name);
  const result = await API.insertTbContent({ pid: '10001', image, url, name })
  if (result.status == 200) {
    getdata(pid.value)
    dialogVisible.value = false
    formInline.image = ''
    formInline.url = ''
    formInline.name=''
  }
}
//删除
const handleDelete = async (index, row) => {
  // console.log(row);
  const result = await API.deleteContentByIds({ id: row.id })
  console.log(result);
  if (result.status == 200) {
    getdata(pid.value)
  }
}
</script>

<style lang="less" scoped>
.content {
  text-align: center;
  >button {
    margin-bottom: 20px;
  }
}
</style>